import React, { ReactElement, useEffect, useState } from 'react'
import { Button, Row, Col, Tag, Input, Select } from 'antd'
import { connect } from 'umi'
import { getAllHeroList } from '@/api/hero'
import styles from '../skin.less'

const { TextArea } = Input
const { Option } = Select;

interface Props {
    type: string,
    hero: any,
    pushItem: Function,
    delItem: Function,
    changeItem: Function
}

function Index({ type, hero, pushItem, delItem, changeItem }: Props): ReactElement {
    const [data, setData] = useState([])
    useEffect(() => {
        getAllHeroList().then(res => {
            setData(res.data)
            
        })
    }, [])

    const handleChange = (index: string) => {
        changeItem(type, Number(index), "hero", data[Number(index)]["_id"])
    }
    return (
        <div>
            <Button onClick={() => {
                pushItem(type)
            }} type="primary"> + 添加英雄</Button>
            <Row>
                {
                    hero[type].map((item: any, index: number) => {
                        return <Col key={index} span={12}>
                            <div className={styles.card}>
                                <div className={styles.flex}>
                                    <span>
                                        <Tag color="processing">英雄{index + 1}</Tag>
                                    </span>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        英雄名称:
                                    </span>
                                    <div>
                                        <Select style={{ width: 120 }} onChange={handleChange}>
                                            {
                                                data.map((item: any, index) => {
                                                    return <Option key = { index } value={ item.id }>
                                                        { item.name }
                                                    </Option>
                                                })
                                            }
                                            

                                        </Select>
                                        {/* <Input onChange={(ev) => {
                                            changeItem(type, index, "hero", ev.target.value)
                                        }} /> */}
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        描述:
                                    </span>
                                    <div>
                                        <TextArea onChange={(ev) => {
                                            changeItem(type, index, "desc", ev.target.value)
                                        }} />
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        <Button
                                            type="primary"
                                            danger
                                            onClick={() => {
                                                delItem(type, index)
                                            }}
                                        >删除</Button>
                                    </span>
                                </div>
                            </div>
                        </Col>
                    })
                }
            </Row>
        </div>
    )
}

export default connect((state: any) => {
    const { hero } = state
    return {
        hero
    }
}, (dispatch) => {
    return {
        pushItem(classify: string) {
            dispatch({ type: "hero/pushItem", classify })
        },
        delItem(classify: string, index: number) {
            dispatch({ type: "hero/delItem", classify, index })
        },
        changeItem(classify: string, index: number, com: any, value: string) {
            dispatch({ type: "hero/changeItem", classify, com, index, value })
        }
    }
})(Index)
